<template>
  <div class="main-card-item" @click="viewDetail">
    <div class="card-header">
      <div class="serial">{{ data.machineName }}#</div>
      <div class="status" :style="{ backgroundColor: zhuanTai.color(data.stateCode) }">
        {{ zhuanTai.text(data.stateCode, processName) }}
      </div>
    </div>
    <div class="card-content">
      <template v-if="code == '111510'">
        <!-- 滤尘 - 状态总览 -->
        <div class="content-item variety">
          {{ $t('custom.位置') }}： <span>{{ data.positionName }}</span>
        </div>
        <div class="content-item table">
          <div class="flex-item">
            <span> {{ $t('custom.对应产线') }}</span>
            <span>{{ data.productLineName }}m</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item">
            <span> {{ $t('custom.进封箱压力') }}</span>
            <span>{{ data.s11002 && data.s11002.toFixed(2) }}</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item">
            <span> {{ $t('custom.机组阻力') }}</span>
            <span>{{ data.s11003 && data.s11003.toFixed(2) }}%</span>
          </div>
        </div>
        <div class="content-item table">
          <div class="flex-item">
            <span> {{ $t('custom.电能') }}</span>
            <span>{{ data.s11004 && data.s11004.toFixed(2) }}m</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item">
            <span> {{ $t('custom.清花停台数') }}</span>
            <span>{{ data.stopCntQh }}</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item">
            <span> {{ $t('custom.清花开台数') }}</span>
            <span>{{ data.runCntQh }}%</span>
          </div>
        </div>
      </template>
      <template v-else>
        <!-- 细纱，粗纱 - 状态总览 -->
        <div class="content-item variety">
          {{ $t('custom.品种') }}： <span>{{ data.materialName }}</span>
        </div>
        <div class="content-item process" v-if="['11310', '11410'].includes(data.stateCode)">
          {{ $t('custom.进度条') }}：
          <div class="process-box">
            <el-progress :percentage="data.yarnPercent" :color="customColorMethod"
          /></div>
        </div>
        <div class="content-item table">
          <div class="flex-item output">
            <span> {{ $t('custom.产量') }}</span>
            <span>{{ data.currentShiftLength }}m</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item speed">
            <span>
              {{ PROCESSES_TEXT_ENUM[code].cardText }}
              {{ PROCESSES_TEXT_ENUM[code].cardTextUnit }}</span
            >
            <span>{{ data.speed }}</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item efficiency">
            <span> {{ $t('custom.运行效率') }}</span>
            <span>{{ data.runEfc }}%</span>
          </div>
        </div>
        <div class="content-item table">
          <div class="flex-item current">
            <span> {{ $t('custom.当前用时') }}</span>
            <span>{{ formatDuration(data.currentTime, { showSeconds: false }) }}</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item remaining">
            <span> {{ $t('custom.剩余时间') }}</span>
            <span>{{ formatDuration(data.timeRemaining, { showSeconds: false }) }}</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item duty">
            <span> {{ $t('custom.值车人员') }}</span>
            <span>{{ data.machinePersonnelOnDutys }}</span>
          </div>
          <el-divider direction="vertical" class="divider" />
          <div class="flex-item employee">
            <span> {{ $t('custom.责任人') }}</span>
            <span>{{ data.mroEmployeeName }}</span>
          </div>
        </div>
        <div class="content-item full" v-if="data.stateCode == '110910'">
          <span> {{ $t('custom.满桶') }}</span>
          <span> {{ data.barrelCntCurrentShift }}/{{ data.barrelCntLastShift }}</span>
        </div>
      </template>
    </div>
  </div>

  <Modal @register="registerModal" />
</template>

<script setup lang="ts">
  import { zhuanTai } from '@/utils/custom/index'
  import { formatDuration } from '@/utils/common/date'
  import { PROCESSES_TEXT_ENUM } from '@/utils/constants/common'
  import { useVxeModal } from '@/components/ui/vxe-modal'

  import Modal from './mainCardDetailModal/index.vue'

  const props = defineProps({
    data: {
      type: Object,
      default: () => {}
    },
    code: {
      type: String,
      default: ''
    },
    processName: {
      type: String,
      default: ''
    }
  })

  const [registerModal, modalMethods] = useVxeModal()

  const viewDetail = () => {
    modalMethods.openModal(true, {
      ...props
    })
  }

  const customColorMethod = (percentage: number) => {
    if (percentage < 60) {
      return '#FF2A2A'
    }
    if (percentage < 80) {
      return '#FF9900'
    }
    return '#0BC15E'
  }
</script>
<style scoped lang="scss">
  .main-card-item {
    background-color: #fff;
    // flex: 1;
    // min-width: 380px;
    margin: 0 12.5px 20px;

    .card-header {
      position: relative;
      height: 30px;
      line-height: 30px;
      background-image: url('../../../assets/images/device-monitor/xs-cardTitleBg.png');
      background-size: 100% 100%;
      background-position: 0 0;

      .serial {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.9);
      }

      .status {
        width: auto;
        padding: 0 15px;
        font-weight: 400;
        font-size: 13px;
        color: #fff;
        background: #0bc15e;
        border-radius: 0px 8px 0px 20px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .card-content {
      padding: 12px 13px 6px 12px;
      box-sizing: border-box;

      .variety {
        padding-left: 23px;
        margin-bottom: 14px;
        font-size: 14px;
        color: #727272;
        span {
          color: rgba(0, 0, 0, 0.9);
        }
      }
      .process {
        padding-left: 23px;
        padding-right: 69px;
        margin-bottom: 22px;
        white-space: nowrap;
        display: flex;
        font-size: 14px;
        color: #727272;
        .process-box {
          width: 95%;
          padding-top: 3px;
          box-sizing: border-box;
        }
      }
      .table {
        display: flex;
        height: 70px;
        border-radius: 8px;
        margin-bottom: 12px;
        background: linear-gradient(#f0f0f0 0%, rgba(224, 224, 224, 0) 100%);
        .flex-item {
          display: flex;
          flex: 1;
          padding: 10px 10px 16px 10px;
          box-sizing: border-box;
          text-align: center;
          flex-direction: column;
          justify-content: space-between;

          span:first-child {
            white-space: nowrap;
            font-size: 12px;
            color: #727272;
          }
          span:last-child {
            white-space: nowrap;
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.9);
          }
        }
        .divider {
          height: 30px;
          margin: 20px 2px;
        }
      }
    }
  }
</style>
